<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<span jigsaw-float class="menu"
      jigsawFloatCloseTrigger="click"
      [jigsawFloatTarget]="subMenu">
    菜单 hover
</span>

<ng-template #subMenu>
    <j-list width="200" trackItemBy="title">
        <j-list-option *ngFor="let title of titles" [value]="title" jigsaw-float jigsawFloatPosition="rightTop"
                       jigsawFloatOpenTrigger="click" jigsawFloatCloseTrigger="mouseleave"
                       [jigsawFloatTarget]="subMenu2">
            <span j-title>{{title.title}}</span>
            <div j-sub-title>{{title.subTitle}} <span class="fa fa-angle-right"></span>
            </div>
        </j-list-option>
    </j-list>
</ng-template>

<ng-template #subMenu2>
    <j-list width="200">
        <j-list-option *ngFor="let idx of [1,2,3,4]" [value]="idx">
            子菜单 {{idx}}
        </j-list-option>
    </j-list>
</ng-template>
